// count容器组件，负责和外面交流
import React, { Component } from "react";
// import CountUI from '../../components/CountUI/index'
import { connect } from "react-redux";
import { createIncreamentAction, createDecreamentAction, createIncreamentAsync } from "../../redux/actions/count";

class CountUI extends Component {
  increament = () => {
    const { value } = this.selectNumber;
    console.log("incre", value);
    this.props.incre(value * 1);
  };
  decreament = () => {
    const { value } = this.selectNumber;
    this.props.decre(value * 1);
  };
  increamentAsync = () => {
    console.log("increamentAsync过一会");
    const { value } = this.selectNumber;
    this.props.increAsync(value * 1, 2000);
  };

  render() {
    console.log("props", this.props,this.state);
    return (
      <div>
        <h3>当前为{this.props.count}</h3>
        <select ref={(n) => (this.selectNumber = n)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <br />
        <button onClick={this.increament}>+</button>
        <button onClick={this.decreament}>-</button>
        <button onClick={this.increamentAsync}>过一会再加</button>
        下面是person组件的
        <br />
        {this.props.per.map((item) => {
          return (
            <div key={item.id} {...item}>
              {item.name}and{item.age}
            </div>
          );
        })}
      </div>
    );
  }
}

// 可以返回多个方法，子组件props里面调用这些
const Count = connect((state) => ({ count: state.countRe,per:state.personRe }), {
  incre: createIncreamentAction,
  decre: createDecreamentAction,
  increAsync: createIncreamentAsync,
})(CountUI);
export default Count;
